<template>
    <view class="nut-checkbox-group">
        <view class="nut-checkbox nut-checkbox--button" @tap="all">
            <view class="nut-checkbox__button" :class="model.length == 0 ? 'nut-checkbox__button--active' : 'false'">不限</view>
        </view>
        <template v-for="(item, index) in options" :key="index">
            <view class="nut-checkbox nut-checkbox--button" @tap="change(item[valueField])">
                <view class="nut-checkbox__button" :class="model.includes(item[valueField]) ? 'nut-checkbox__button--active' : 'false'">{{ item[nameField] }}</view>
            </view>
        </template>
    </view>
</template>

<script lang="ts" setup>
    import "@nutui/nutui-taro/dist/packages/checkboxgroup/index.css";
    import "@nutui/nutui-taro/dist/packages/checkbox/index.css";
    const props = withDefaults(defineProps<{
        options:Array<{value:any; name:string}>;
        nameField:string;
        valueField:string
    }>(), {
        nameField:'name',
        valueField:'value'
    })


    const model = defineModel<any[]>({
        default : []
    })

    function all() {
        model.value.splice(0)
    }

    function change(v) {
        let index = model.value.indexOf(v)
        if(index >= 0) {
            model.value.splice(index, 1)
        }else {
            model.value.push(v)
        }
    }
</script>